<!--
 * @Date: 2022-03-24 17:00:15
 * @LastEditors: wuyuxin
 * @LastEditTime: 2022-03-24 17:00:15
 * @FilePath: \Vue3-code\05_composition_api\src\02_compositionAPI基础\Home.vue
 * @description: 文件描述
-->
<!--
 * @Date: 2022-03-24 11:21:12
 * @LastEditors: wuyuxin
 * @LastEditTime: 2022-03-24 16:50:41
 * @FilePath: \Vue3-code\05_composition_api\src\02_compositionAPI基础\Home.vue
 * @description: 文件描述
-->
<template>
  <div>
    <button @click="updateState">修改状态</button>
  </div>
</template>

<script>
  import { reactive, ref, readonly } from 'vue';

  export default {
    setup() {
      // 1.普通对象
      const info1 = {name: "why"};
      const readonlyInfo1 = readonly(info1);

      // 2.响应式的对象reactive
      const info2 = reactive({
        name: "why"
      })
      const readonlyInfo2 = readonly(info2);

      // 3.响应式的对象ref
      const info3 = ref("why");
      const readonlyInfo3 = readonly(info3);

      const updateState = () => {
        // readonlyInfo3.value = "coderwhy"
        info3.value = "coderwhy";
      }

      return {
        updateState,
      }
    }
  }
</script>

<style scoped>

</style>